<template>
	<view class="app">
		<load :ready="ready"></load>
		

		<u-form :model="form" label-position="top" ref="uForm">
			<u-form-item prop="siteLabel" label="充装站" :required="true">
				<u-input  v-model="form.siteLabel" type="select" @click="handleShowSite('site')" placeholder="请选择充装站" />
			</u-form-item>
			
			<u-form-item prop="code" label="钢瓶编码" :required="true">
				
				<view class="code-wrap">
					<view class="inputbox">
						<u-input  v-model="form.code" type="text" placeholder="请输入钢瓶编码" />
					</view>
					<view>
						<view class="btn-add" @click="handleCode()">扫码</view>
					</view>	
				</view>
				
			</u-form-item>
			<u-form-item label="瓶身识别码" >
				<u-input  v-model="form.shared_code" type="text" placeholder="请输入瓶身识别码" />
			</u-form-item>
			<u-form-item label="备注" >
				<u-input  v-model="form.remark" type="text" placeholder="请输入备注" />
			</u-form-item>
			
			
			<u-gap height="100"></u-gap>
			<view class="btnbox">
				<u-button type="primary" shape="circle" @click="submit" :custom-style="btnStyle">提交</u-button>
			</view>
		</u-form>
		
		
		<u-select v-model="showSite" @confirm="confirm" :list="siteList"></u-select>
		
		
	</view>
</template>
<style>
 .bottle_number{
    position: absolute;
    top: 10rpx;
    right: 0;             
 }
</style>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	import throttle from '@/common/js/throttle.js';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {
		},
		data() {
			return {
				ready: true,
				form: {
					site_id:'',
					code:'',
					shared_code:'',
					remark:'',
				},
				btnStyle: this.$config.btnStyle,
               
				btnStyle2:{
					background: '#0093dd',
					borderRadius: '16px',
					padding:'0 15px',
					marginLeft: '5px'
				},
				verCode: {
					text: '获取验证码',
					code: '',
					isDownIng: false,
					i: 60,
					t: null,
				},
				background: {
					backgroundColor: '#f7f7f7'
				},
				lineStyle: {
					right: '20rpx',
					bottom: '4px'
				},
				siteType:'',
				showSite:false,
				siteList:[],
				info:{},
				rules: {
					// 字段名称
					siteLabel: [
						{
							required: true,
							message: '请选择站点',
							trigger: ['change', 'blur'],
						},
					],
					code: [{
							required: true,
							message: '请输入钢瓶编码',
							trigger: ['change', 'blur'],
						},
						{
							min: 6,
							max: 6,
							message: '钢瓶编码为6位数'
						},
					],
				}
			};
		},
		onLoad() {
			this.getInit();
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.src = '/static/mp3/err.mp3';
			this.innerAudioContext.onPlay(() => {
			  console.log('开始播放');
			});
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			// #ifdef H5
			this.$common.h5SetTitle('');
			// #endif
		},
		onUnload() {
			that = null
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		methods: {
			handleCode(){
				// 调起条码扫描
				const that = this;
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						if(res.result.length != 6){
							that.innerAudioContext.play();
							that.$common.showTip('编码数错误');
							return
						} 
						that.form.code = res.result
					},
					fail(err){
						console.log(err)
						that.$common.showTip(err.errMsg);
						that.innerAudioContext.play();
					},
				});
			},
			async getInit() {
				let res;
			    try {
			        res = await this.$api.siteList();
			    } catch (e) {
			        uni.hideLoading();
			        console.log('err', e);
			    }
			    if (res.data.code == this.$config.RESOK) {
			       let list = res.data.data || [];
				   let siteList = [];
				   list.forEach(item=>{
					   if(item.id != this.id){
						   siteList.push({
							   label:item.name,
							   value:item.id,
						   })
					   }
				   })
			       this.siteList = siteList;
			    } 
			},
			confirm(e){
				const data = e[0];
				if(this.siteType == 'site'){
					this.$set(this.form, 'site_id', data.value);
					this.$set(this.form, 'siteLabel', data.label);
				} 
			},
			handleShowSite(type){
				this.siteType = type;
				this.showSite = true;
			},
			async submit() {
				console.log('submit')
				let istrue = true
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
						istrue = false
					}
				});
				if (!istrue) return
				this.isLoading = true
				let params  = {
					...this.form,
					token:this.userInfo.token,
				}
				let res = await this.$api.bottlelnput(params);
				this.isLoading = false;
				console.log(res);
				if (res.data.code == this.$config.RESOK) {
					this.$common.showTip(res.data.msg);
					setTimeout(() => {
						uni.navigateBack()
					}, this.$config.timeLoad);
				} else {
					this.$message.error( res.data.msg.indexOf('for key') != -1 ? '钢瓶已经存在!' :  res.data.msg);
				}
			},
			...mapActions([]),
		},
		computed: {
			...mapState({
				userInfo: 'userInfo',
			})
		},

	};
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/login.scss';

	.app {
		padding: 0 30rpx;
	}

	.btnbox {
		padding: 30rpx 0;
	}
	
	.tips{
		font-size: 13px;
		color: $color-yel;
		margin-top: 4px;
	}
	.tag-wrap{
		display: flex;
		flex-wrap: wrap;
		line-height: 1.5;
		.tag{
			display: inline-block;
			margin-right: 4px;
			margin-bottom: 4px;
		}
	}
	
	.int-wrap{
		background: #f5f5f5;
		margin-bottom: 20rpx;
		display: flex;
		border: 1px solid #ddd;
		.int{
			flex: 1;
			padding: 0 20rpx;
			border-radius: 5px;
		}
		.add{
			width: 100rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #55aa7f;
			font-size: 13px;
			text-align: center;
			border-radius: 5px;
			color: #fff;
		}
	}
	
	.btn-add{
		width: 100rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #55aa7f;
		font-size: 13px;
		text-align: center;
		border-radius: 5px;
		color: #fff;
		display: inline-block;
	}
	
	.send-popup{
		padding: 20rpx 30rpx;
		position: relative;
		.btn-close{
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}
		.title{
			text-align: center;
			font-size: 16px;
			margin-bottom: 20rpx;
		}
		.item{
			margin-bottom: 20rpx;
		}
		.label{
			font-size: 14px;
			margin-bottom: 6px;
		}
		.btnbox{
			padding-top: 30rpx;
		}
	}
	
	.input2{
		width: 100%;
		line-height: 80rpx;
		height: 80rpx;
	}
	.input2ply{
	}
	
	.code-wrap{
		width: 100%;
		display: flex;
		.inputbox{
			flex: 1;
		}
	}
</style>